import React  from 'react';
import Group from '../../icons/Group.svg';
import Profile from '../../icons/Profile.svg';
import Material from '../../icons/Material.svg';
import './Navigation.css';


const Navigation = ({ activeItem, handleItemClick }) => {
    return (
        <aside className="navigation">
            <div
                className={`nav-item ${activeItem === 'profile' ? 'active' : ''}`}
                onClick={() => handleItemClick('profile')}
            >
                <img src={Profile} alt="Профиль" />
                <span>Профиль</span>
            </div>
            <div
                className={`nav-item ${activeItem === 'groups' ? 'active' : ''}`}
                onClick={() => handleItemClick('groups')}
            >
                <img src={Group} alt="Группы" />
                <span>Группы</span>
            </div>
            <div
                className={`nav-item ${activeItem === 'materials' ? 'active' : ''}`}
                onClick={() => handleItemClick('materials')}
            >
                <img src={Material} alt="Материалы" />
                <span>Материалы</span>
            </div>
        </aside>
    );
};

export default Navigation;